<template>
<div class="foot border-1px">
    <div class="content">
        <ul>
        <li><router-link tag="div" to="/recommend"class="nav-item"><span class="icon icon-list2"></span><span class="tab-link">商品</span></router-link></li>
        <li><router-link tag="div" to="/recommed"class="nav-item"><span class="icon icon-home"></span><span class="tab-link">首页</span></router-link ></li>
        <li><router-link tag="div" to="/recomd"class="nav-item"><span class="icon icon-gift"></span><span class="tab-link">推荐</span></router-link ></li>
        <li><router-link tag="div"to="/recommen" class="nav-item"><span class="icon icon-cart"></span><span class="tab-link">购物车</span></router-link ></li>
        <li><router-link tag="div"to="/remmend" class="nav-item"><span class="icon icon-user"></span> <span class="tab-link">个人中心</span></router-link ></li>
        </ul>
    </div>
</div>



</template>


<script>
export default {

}
</script>


<style lang="stylus" rel="stylesheet/stylus" >
@import "../../common/stylus/mixin.styl"

.foot
  position:fixed
  left:0
  bottom:0
  z-index:50
  width:100%
  height:48px
  background:#fff
  border-top:1px solid #ddd
  .content
    font-size:12px
    &>ul
      line-height:40px
      display:flex
      li
        flex:1
        width: 20%
        text-align: center
        padding:4px
        .nav-item
          color:#333
          position: relative;
          height: 30px
          padding: 4px
          width: 50px
          margin: 0 auto
          border-radius: 4px
          span
            display:block
          .icon
            font-size:14px
          .tab-link
            padding-top:5px
            line-height:12px
        .router-link-exact-active
          border:1px solid #a70432
          .tab-link
            color:#a70432
          .icon
            color:#a70432


</style>
